<template>
  <div>
    <el-card class="box-card">
      交卷界面
    </el-card>
    <el-card class="box-card" style="margin-top: 15px">
      <h3>客观题得分：{{ score }}</h3>
      <!-- 总体概况 -->
      <el-row :gutter="0">
        <el-col :span="7">
          <div class="grid-content bg-purple">
            满分：{{ totalScore }}
          </div>
        </el-col>
        <el-col :span="17">
          <div class="grid-content bg-purple">
            <div class="big-box">
              <div class="box">结果：<span style="color: red">{{ result }}</span></div>
              <div class="box">排名：<span style="color: red">未排名 【获取名次】</span></div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row :gutter="0">
        <el-col :span="7">
          <div class="grid-content bg-purple">
            错题所在主要科目、章节：
          </div>
        </el-col>
        <el-col :span="17">
          <div class="grid-content bg-purple">
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="subjectName"
                label="科目"/>
              <el-table-column
                prop="chapterName"
                label="章节"/>
              <el-table-column
                prop="testCentre"
                label="考点"/>
              <el-table-column
                prop="falseQuestNum"
                label="错题数"/>
            </el-table>
          </div>
        </el-col>
      </el-row>
      <div style="text-align: center"> <router-link :to="'/exercise/testresultdetails/' + testId + '/' + handPaperId"><el-button><span size="small" type="text">查看详细答案结果</span></el-button></router-link></div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [],
      testId: '',
      handPaperId: '',
      totalScore: '',
      score: '',
      result: '',
      name: ''
    }
  },
  mounted() {
    if (this.$route.params.testId) {
      this.testId = this.$route.params.testId
      this.handPaperId = this.$route.params.handPaperId
      this.queryList()
    }
  },
  methods: {
    queryList() {
      axios.get(`/handPaper/result/${this.testId}/${this.handPaperId}`).then(res => {
        if (res.success) {
          this.totalScore = res.totalScore
          this.result = res.result
          this.score = res.score
          this.tableData = res.falseQuestChapterData
          console.log(res.falseQuestChapterData)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 0px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #fff;
  }
  .grid-content {
    border-radius: 0px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .big-box{
    display: flex;
    .box{
      flex: 1;
    }
  }
</style>
